<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="main :: common_head">
    <style>
        .mylabel {
            display: inline;
        }

        .greenColor {
            color: green;
        }

        .redColor {
            color: red;
        }
    </style>
</head>
<body>
<!--删除提示模态框-->
<div class="modal fade" id="delcfmModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">是否要删除？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="deleteProperty()">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--删除提示模态框结束-->

<div class="container-fluid-full">
    <div class="row-fluid">

        <noscript>
            <div class="alert alert-block span10">
                <h4 class="alert-heading">Warning!</h4>
                <p>You need to have <a href="" target="_blank">JavaScript</a> enabled to use this site.</p>
            </div>
        </noscript>

        <!-- start: Content -->
        <div id="content" class="span10" style="width: 100%;">
            <ul class="breadcrumb" th:if="${#request.getParameter('breadcrumb') == 'true'}">
                <li>
                    <i class="fas fa-circle-notch"></i>
                    <a id="home" href="#" onclick="parent.location.reload()">主页</a>
                    <i class="icon-angle-right"></i>
                </li>
                <li><a href="#">能源属性修改</a></li>
            </ul>
            <div class="row-fluid sortable">
                <div class="box span12">
                    <div class="box-header" data-original-title>
                        <h2><i class="halflings-icon white edit"></i><span class="break"></span>修改能源属性</h2>
                    </div>
                    <div class="box-content">
                        <!--<form class="form-horizontal"  th:action="@{/device/addDevice}" method="post">-->
                        <form id="form1" class="form-horizontal" enctype="multipart/form-data" method="post">
                            <input type="hidden" id="typeId" name="typeId" th:value="${energyType.typeId}">
                            <fieldset>
                                <div class="control-group">
                                    <label class="control-label">能源属性ID</label>
                                    <div class="controls">
                                        <span class="input-xlarge uneditable-input" id="deviceId" th:value="${energyType.typeId}" th:text="${energyType.typeId}"></span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">能源属性名称</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="text" placeholder=""
                                               name="typeName" onchange="checkPropertyName()"
                                               th:value="${energyType.typeName}" required="required" id="typeName">
                                        <div style="display: inline" id="checkName">
                                        </div>
                                        <span style="color:red;font-size: 20px">*</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">能源属性图片</label>
                                    <div class="controls" style="position: relative">
                                        <!--<img th:src="'data:image/png;base64,'+${device.picPath}"/>-->
                                        <input class="input-xlarge focused" onchange="previewPic()" type="file"
                                               accept="image/jpg,image/jpeg,image/png,image/PNG" placeholder=""
                                               name="icon" id="pic">
                                    </div>
                                    <div style="width: 80px;height: 80px;background-color: #578ebe;margin-left: 180px">
                                        <img id="showImg" style="width: 80px;height: 80px;" th:src="${energyType.iconPath}"/>
                                    </div>

                                </div>
                                <!--<div class="control-group">-->
                                <!--<label class="control-label">能源属性图片</label>-->
                                <!--<div class="controls">-->
                                <!--<input class="input-xlarge focused" onchange="previewPic()" type="file" id="icon" accept="image/jpg,image/jpeg,image/png,image/PNG" placeholder=""-->
                                <!--name="icon" >-->
                                <!--</div>-->
                                <!--</div>-->
                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary" onclick="editProperty();return false">提交</button>
                                    <button type="button" class="btn btn-primary" onclick="toDevice()">返回</button>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div><!--/span-->
            </div><!--/row-->
        </div>
    </div>
</div>

<div class="clearfix"></div>

<div th:replace="main::common_js"></div>

<script>
    breadcrumb()
    window.onload = function() {
        parent.modifyTitle('能源属性')
    }
</script>

<script th:src="@{/js/detect-element-resize.js}"></script>
<script th:src="@{/js/iframe-resize.js}"></script>

<script>
    var addCheckName = true;//判断能源属性名
    //图片预览
    function previewPic() {
        //获取显示图片对象
        var preview = document.getElementById("showImg");   // 通过元素节点查找： document.querySelector('img');
        //获取选中图片对象（包含文件的名称、大小、类型等，如file.size）
        var file = document.getElementById("pic").files[0];
        console.log(file);
        //document.querySelector('input[type=file]').files[0];
        //声明js的文件流
        var reader = new FileReader();
        if (file) {
            //通过文件流将文件转换成Base64字符串
            reader.readAsDataURL(file);
            //转换成功后
            reader.onloadend = function () {
                //将转换结果赋值给img标签
                preview.src = reader.result;
                //输出结果
                // document.getElementById("showText").value = reader.result;
            }
        } else {
            preview.src = "";
        }
    }

    //修改能源属性表单提交
    function editProperty() {
        var formData = new FormData($("#form1")[0]); //表单的formData数据
        var typeName = document.getElementById("typeName");//能源属性名
        if (typeName.value == "") {
            window.parent.layerAlert('属性名不能为空', {
                icon: 5,
                title: "提示"
            });
            return false;
        }
        if (addCheckName == false) {
            window.parent.layerAlert('请输入未被使用的属性名', {
                icon: 5,
                title: "提示"
            });
            return false;
        }
        //修改提交接口
        $.ajax({
            type: "POST",
            data: formData,
            url: "/multipower/energyType/update",
            processData: false,
            contentType: false,
            success: function (data) {
                console.log("成功");
                window.location.href = "/multipower/energyType/viewEnergyType";
            },
        })
    }

    //判断属性名是否已经存在
    function checkPropertyName() {
        var typeName = $("#typeName").val();
        console.log(typeName);
        $.ajax({
            type: "GET",
            data: {energyTypeName: typeName},
            url: "/multipower/energyType/check",
            success: function (data) {
                console.log(data.check);
                if (data.check == "yes") {
                    var span = document.createElement("span");
                    span.setAttribute("class", "greenColor");
                    span.innerHTML = "该属性名可以使用";
                    $("#checkName").html(span);
                    addCheckName = true;
                }
                if (data.check == "no") {
                    var span = document.createElement("span");
                    span.setAttribute("class", "redColor");
                    span.innerHTML = "该属性名已存在，请使用其他设备名";
                    $("#checkName").html(span);
                    addCheckName = false;
                }
            },
        })
    }
</script>
</body>
</html>
